<template>
    <div class="operate-screen">
        <button class="return-btn" @click="goBack">
            ←
        </button>
        <div class="viewport">
            <div class="content">
                <div class="left-con">
                    <div class="panel ltop">
                        <div class="inner">
                            <div class="item">
                                <el-statistic class="val" group-separator=","
                                    :value="therometerData.total * 1"></el-statistic>
                                <span>温度计总数</span>
                            </div>
                            <div class="item">
                                <el-statistic class="val" group-separator=","
                                    :value="therometerData.in_transit_cnt * 1"></el-statistic>
                                <span>在途温度计</span>
                            </div>
                            <div class="item">
                                <el-statistic class="val" group-separator=","
                                    :value="therometerData.abnormal_cnt * 1"></el-statistic>
                                <span>异常温度计</span>
                            </div>
                        </div>
                    </div>
                    <div class="panel lcenter">
                        <div class="inner">
                            <div class="panel-title">超时未操作 </div>
                            <EarlyWarning origin="screen"></EarlyWarning>
                        </div>
                    </div>
                    <div class="panel lbottom">
                        <div class="inner">
                            <div class="panel-title" style="padding-bottom: 10px;">保温箱数量 </div>
                            <IncubatorNum origin="screen" height="300"></IncubatorNum>
                        </div>
                    </div>
                </div>
                <div class="center-con">
                    <div class="ctop">
                        <h3>在途订单</h3>
                        <div class="chart">
                            <SingleFlight origin="screen"></SingleFlight>
                        </div>
                    </div>
                    <div class="panel ccenter">
                        <div class="inner">
                            <div class="panel-title">订单数 </div>
                            <WaybillNum origin="screen" height="180"></WaybillNum>
                        </div>
                    </div>
                </div>
                <div class="right-con">
                    <div class="panel rtop">
                        <div class="inner">
                            <div class="rt-nav">
                                <span :class="{ active: activeIndex === index }" @click="timeNavClick(index)"
                                    v-for="(item, index) in timeArr" :key="index">{{ item }}</span>
                                <!-- <span>本月</span>
                                <span>本年</span> -->
                            </div>
                            <div class="rt-card">
                                <div class="item">
                                    <el-statistic class="val" group-separator=","
                                        :value="nowTimeData.waybill_cnt * 1"></el-statistic>
                                    <span>订单数</span>
                                </div>
                                <div class="item">
                                    <el-statistic class="val" group-separator="," :precision="2"
                                        :value="nowTimeData.total_income * 1"></el-statistic>
                                    <span>总收入</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel rcenter">
                        <div class="inner">
                            <div class="panel-title">运营总成本</div>
                            <OperatingCosts origin="screen" height="220"></OperatingCosts>
                        </div>
                    </div>
                    <div class="panel rbottom">
                        <div class="inner">
                            <div class="panel-title">承运商未对账</div>
                            <Unreconciled origin="screen"></Unreconciled>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import OperatingCosts from "@/page/index/components/operating/operatingCosts.vue";
import Unreconciled from "./components/unreconciled.vue";
import Position from "@/page/index/components/operating/position.vue";
import WaybillNum from "@/page/index/components/waybillNum.vue"; // 订单数 || 运单数
import IncubatorNum from "@/page/index/components/operating/incubatorNum.vue";
import SingleFlight from "@/page/index/components/singleFlight.vue";
import EarlyWarning from "./components/earlyWarning.vue";
import { OperateCount } from "@/api/echarts";

export default {
    name: 'operate',
    components: { OperatingCosts, Unreconciled, Position, WaybillNum, IncubatorNum, SingleFlight, EarlyWarning },
    props: [],
    data() {
        return {
            timeArr: ['本周', '本月', '本年'],
            activeIndex: 0,
            numData: [],
            nowTimeData: {
                waybill_cnt:"",
                total_income:""
            },
            therometerData: {},
            timer: null,
        };
    },
    mounted() {
        OperateCount({}).then(res => {
            const data = res.data.data || {};
            this.numData = [data.week, data.month, data.year];
            this.therometerData = data.thermometer;
            this.nowTimeData = this.numData[this.activeIndex];
        });
        this.timer = setInterval(() => {
            this.activeIndex = this.activeIndex + 1 > 2 ? 0 : this.activeIndex + 1;
            this.timeNavClick(this.activeIndex);
        }, 3000);
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
    methods: {
        timeNavClick(index) {
            this.activeIndex = index;
            this.nowTimeData = this.numData[this.activeIndex];
        },
        goBack(){
            this.$router.back()
        }
    },
};
</script>
<style lang="scss" scoped>
.operate-screen {
    background: rgb(16, 17, 41);
    min-height: 100vh;
    color: #1d5979;

    .viewport {
        min-width: 1024px;
        max-width: 1920px;
        min-height: 780px;
        margin: 0 auto;
        background: url(./images/logo.png) no-repeat 0 0 / contain;
        display: flex;
        padding: 80px 18px 0;
    }

    .panel {
        height: 200px;
        box-sizing: border-box;
        border: 2px solid red;
        border-image: url(./images/border.png) 51 38 21 132;
        border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        position: relative;
        margin-bottom: 18px;

        .inner {
            position: absolute;
            top: -2.125rem;
            right: -1.583rem;
            bottom: -0.875rem;
            left: -5.5rem;
            padding: 1rem 1.5rem;
        }

        .panel-title {
            font-size: 13px;
            color: #fff;
            text-align: left;
            padding-bottom: 5px;
        }
    }




    .title {
        // display: flex;
        width: 100%;
        height: 55px;
        // background: url(./head_bg.png) no-repeat center center;
        color: #fff;
        text-align: center;
        font-size: 24px;
        line-height: 50px;
    }

    .item {
        .val {
            font-size: 20px;
            color: #fff;
            margin-bottom: 0.333rem;

            /deep/.con {
                justify-content: flex-start;
            }

            /deep/.con .number {
                font-size: 20px;
                color: #fff;
                line-height: 30px;
                padding: 0;
            }
        }

        span {
            font-size: 12px;
            color: #4c9bfd;
            display: flex;
            align-items: center;

            &::before {
                content: "";
                display: inline-block;
                width: 5px;
                height: 10px;
                border-radius: 5px;
                background: #006cff;
                margin-right: 4px;
            }

        }

    }

    .content {
        display: flex;
        width: 100%;

        .left-con {
            flex: 3;

            .ltop {
                height: 110px;

                .inner {
                    display: flex;
                    justify-content: space-between;
                    padding: 0px 30px;
                    align-items: center;

                    .item {

                        &:nth-child(1) {
                            span {
                                &::before {
                                    background: #006cff;
                                }
                            }
                        }

                        &:nth-child(2) {
                            span {
                                &::before {
                                    background: #6acca3;
                                }
                            }
                        }

                        &:nth-child(3) {
                            span {
                                &::before {
                                    background: #ed3f35;
                                }
                            }
                        }
                    }

                }

            }

            .lcenter {
                height: 300px;
            }

            .lbottom {
                height: 360px;
            }
        }

        .center-con {
            flex: 4;
            margin: 20px 15px 0;

            .ctop {
                height: 500px;
                margin-bottom: 10px;
                display: flex;
                flex-direction: column;
            }

            .ccenter {
                height: 264px;
                display: flex;
                background: #101129;
            }
        }

        .right-con {
            flex: 3;

            .rtop {
                padding: 20px;
                height: 130px;

                .rt-nav {
                    span {
                        color: #1950c4;
                        line-height: 12px;
                        font-size: 12px;
                        padding: 0 0.75rem;
                        border-right: 1px solid #00f2f1;

                        &:first-child {
                            padding-left: 0;
                        }

                        &:last-child {
                            border-right: none;
                        }

                        &.active {
                            color: #fff;
                        }
                    }
                }

                .rt-card {
                    display: flex;
                    margin-top: 16px;

                    .item {
                        min-width: 120px;

                        &:nth-child(1) {
                            span {
                                &::before {
                                    background: #ed3f35;
                                }
                            }
                        }

                        &:nth-child(2) {
                            span {
                                &::before {
                                    background: #eacf19;
                                }
                            }
                        }
                    }
                }
            }

            .rcenter {
                height: 280px;
            }

            .rbottom {
                height: 358px;
            }
        }
    }
}
.return-btn {
  font-size: 20px;
  background-color: rgb(27,87,156);
  color: rgb(29,199,237);
  width: 45px;
  height: 25px;
  line-height: 25px;
  border: 1px solid rgb(29,199,237);
  border-radius: 8px;
  cursor: pointer;
  position: absolute;
  top:33px;
  left: 24px;
}

.return-btn:hover {
  animation: bounce_513 1s infinite;
}

@keyframes bounce_513 {
  0%,
    100% {
    transform: translateX(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

</style>